import { useEffect, useState } from 'react';
import { Form, Input, Select, Modal } from 'antd';
import { IRoles } from './index'
const { Option } = Select;

export interface Item {
  key?: number;
  userName?: string;
  nickName?: string;
  phone?: string;
  roles?: IRoles[];
  isEnable?: number;
  updateTime?: string;
  [prototype: string]: any;
}

const DialogModalForm = (props: any) => {

  const [formDialog] = Form.useForm();
  let { isModalVisible, handleSetIsModalVisible, modalTitle, record, roles } = props;
  const [confirmLoading, setConfirmLoading] = useState(false);
  // 弹框表单

  useEffect(() => {
    if(record) {
      // let rolesArr: number[] = [];
      let rolesArr: string[] = [];
      record?.roles.map((role: IRoles) => rolesArr.push(role.name))
      formDialog.setFieldsValue({...record, roles: rolesArr})
    }
  }, [record, formDialog])

  const handleOk = () => {
    setConfirmLoading(true)
    console.log(Object.assign(formDialog.getFieldsValue(), {key: record?.key}), '提交')
    setTimeout(() => {
      setConfirmLoading(false)
      handleSetIsModalVisible(false)
    }, 2000)
  };

  const handleCancel = () => {
    handleSetIsModalVisible(false);
    formDialog.resetFields();
  };

  const layout = {
    labelCol: { span: 6 },
    wrapperCol: { span: 16 },
  };
  // const validateMessages = {
  //   required: '${label} is required!',
  //   // types: {
  //   //   email: '${label} is not a valid email!',
  //   //   number: '${label} is not a valid number!',
  //   // },
  //   // number: {
  //   //   range: '${label} must be between ${min} and ${max}',
  //   // },
  // };

  return (
    <Modal forceRender 
      title={modalTitle} 
      visible={isModalVisible} 
      onOk={handleOk} 
      onCancel={handleCancel} 
      confirmLoading={confirmLoading}
    >
      <Form name="modal-messages" 
        form={formDialog} {...layout} 
        // validateMessages={validateMessages} 
        initialValues={{ isEnable: 1 }}
      >
        <Form.Item name="userName" label="用户名" rules={[{ required: true }]}>
          <Input placeholder="请输入用户名" />
        </Form.Item>
        <Form.Item name="nickName" label="昵称" >
        {/* <Form.Item name="nickName" label="昵称" rules={[{ type: 'email' }]}> */}
          <Input placeholder="请输入昵称" />
        </Form.Item>
        {/* <Form.Item name="phone" label="电话" rules={[{ type: 'number', min: 0, max: 99 }]}> */}
        <Form.Item name="phone" label="电话">
          <Input placeholder="请输入电话" />
        </Form.Item>
        <Form.Item name="roles" label="角色">
          <Select placeholder="请选择角色" mode="multiple" allowClear>
            {
              roles.map((role: IRoles)=> (
                <Option value={role.name} key={role.id}>{role.name}</Option>
              ))
            }
          </Select> 
        </Form.Item>
        <Form.Item
          name="isEnable"
          label="状态"
        >
          <Select>
            <Option value={1}>启用</Option>
            <Option value={0}>已禁用</Option>
          </Select>
        </Form.Item>
      </Form>
    </Modal>
  )
}

export default DialogModalForm;
